<template>
  <div class="wrap">
    <!-- <img src="../assets/loginLogo.png" class="logo" alt=""> -->
    <p class="title mt">首次登陆</p>
    <p class="title mb">绑定报货预留手机号</p>
    <div class="form">
      <div class="item">
        <img src="../assets/loginPhone.png" class="phone" alt="">
        <input type="text" v-model="tel" placeholder="请输入手机号">
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt="">
        <input type="text" v-model="checkCode" placeholder="请输入验证码">
        <p @click="sendMessage">{{ms}}</p>
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt="">
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <div class="item">
        <img src="../assets/pass.png" class="pass" alt="">
        <input type="password" v-model="checkPassword" placeholder="请再次输入密码">
      </div>
      <!-- <p class="w_pass" @click="reLogin">返回登陆</p> -->
      <div class="btnBox">
        <button class="login" @click="register">绑定手机号</button>
      </div>
    </div>
  </div>
</template>
<script>
import { setRegister, sendSms, login, exist } from "@/utils/interface";
import { Dialog } from "vant";

export default {
  data() {
    return {
      tel: "",
      password: "",
      checkCode: "",
      checkPassword: "",
      ms: "发送验证码",
      bok: true
    };
  },
  methods: {
    reLogin() {
      this.$router.go(-1);
    },
    sendMessage() {
      let that = this;
      exist({ account: that.tel }).then(res => {
        if (res.data.code == 200 && res.data.data == 0) {
          if (!/^1[3456789]\d{9}$/.test(that.tel)) {
            Dialog.alert({
              message: "手机号码有误，请重填"
            });

            return false;
          }
          if (!that.bok) {
            return false;
          }
          that.bok = false;
          sendSms({
            account: that.tel
          }).then(res => {
            let n = 60;
            let timer = setInterval(() => {
              n--;
              that.ms = `${n}秒后重试`;
              if (n <= 0) {
                clearInterval(timer);
                that.ms = "重新获取";
                that.bok = true;
              }
            }, 1000);
          });
        } else {
          Dialog.alert({
            message: "该账号已经存在,请直接登陆"
          });
        }
      });
    },
    register() {
      if (!/^1[3456789]\d{9}$/.test(this.tel)) {
        Dialog.alert({
          message: "手机号码有误，请重填"
        });
        return false;
      }
      if (!this.checkCode) {
        Dialog.alert({
          message: "请输入验证码"
        });
        return false;
      }
      if (!this.password) {
        Dialog.alert({
          message: "请输入密码"
        });
        return false;
      }
      if (this.password.length < 6) {
        Dialog.alert({
          message: "密码不能少于6位"
        });
        return false;
      }
      if (this.password !== this.checkPassword) {
        Dialog.alert({
          message: "两次密码输入不一致"
        });
        return false;
      }
      exist({ account: this.tel }).then(res => {
        if (res.data.code == 200 && res.data.data == 0) {
          setRegister({
            account: this.tel,
            password: this.password,
            checkCode: this.checkCode,
            openId: localStorage.getItem("wechataccess_user_token")
          }).then(res => {
            if (res.data.code == 200) {
              login({
                account: this.tel,
                password: this.password,
                openId: localStorage.getItem("wechataccess_user_token")
              }).then(res => {
                if (res.data.code == 200) {
                  localStorage.setItem("customerwx", res.data.data.jsessionid);
                  Dialog.alert({
                    message: "注册成功,直接登陆"
                  }).then(res => {
                    if (
                      this.getUrlParams("state") &&
                      this.getUrlParams("state") != "STATE"
                    ) {
                      window.location.href =
                        "http://www.jiebaodingdan.com/customer-mobile?state=" +
                        this.getUrlParams("state") +
                        "/#/follow";
                    } else {
                      this.$router.replace("/");
                    }
                  });
                }
              });
            }

            console.log(res.data);
          });
        } else {
          Dialog.alert({
            message: "该账号已经存在,请直接登陆"
          });
        }
      });
    },
    getUrlParams(name) {
      // 不传name返回所有值，否则返回对应值
      var url = window.location.search;
      if (url.indexOf("?") == 1) {
        return false;
      }
      url = url.substr(1);
      url = url.split("&");
      var name = name || "";
      var nameres;
      // 获取全部参数及其值
      for (var i = 0; i < url.length; i++) {
        var info = url[i].split("=");
        var obj = {};
        obj[info[0]] = decodeURI(info[1]);
        url[i] = obj;
      }
      // 如果传入一个参数名称，就匹配其值
      if (name) {
        for (var i = 0; i < url.length; i++) {
          for (const key in url[i]) {
            if (key == name) {
              nameres = url[i][key];
            }
          }
        }
      } else {
        nameres = url;
      }
      // 返回结果
      return nameres;
    }
  },
  created() {
    document.title = "绑定手机号";
  }
};
</script>

<style scoped lang="scss">
.wrap {
  overflow: hidden;
  .title{
    font-size: .6rem;
    color: #333;
    text-align: left;
     width: 6.733333rem;
    margin: 0 auto;
    font-weight: bold
  }
  .mt{
     margin-top: .6rem 
  }
  .mb{
    margin-bottom: 1.44rem;
  }
  .logo {
    width: 3.426667rem;
    margin: 1.866667rem auto 1.44rem;
  }
  .item {
    width: 6.733333rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #3fd9c9;
    height: 1.44rem;
    .phone {
      width: 0.533333rem;
      height: 0.533333rem;
      display: block;
    }
    .pass {
      width: 0.466667rem;
      height: 0.533333rem;
      display: block;
    }
    input {
      display: block;
      outline: none;
      border: none;
      flex: 2;
      margin-left: 15px;
      height: 90%;
      color: #3fd9c9;
    }
    p {
      border: 0.5px solid #3fd9c9;
      border-radius: 30px;
      padding: 2px 10px;
      color: #3fd9c9;
      min-width: 80px;
    }
  }
  .w_pass {
    color: #3fd9c9;
    text-align: left;
    width: 6.733333rem;
    margin: 15px auto;
  }
  .btnBox {
    margin-top: 2.053333rem;
    button {
      height: 1.133333rem;
      width: 6.813333rem;
      border: 1px solid #3fd9c9;
      border-radius: 30px;
      background: transparent;
      color: #3fd9c9;
      outline: none;
      font-size: 16px;
    }
    .login {
      color: #fff;
      background: #3fd9c9;
      margin-bottom: 0.733333rem;
    }
  }
}
</style>
